<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>注册</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="style/admin.css" media="all">
  <link rel="stylesheet" href="style/login.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
      .layadmin-user-login {
          padding: 0px;
      }
  </style>
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
  <div class="layadmin-user-login-main">
    <div class="layadmin-user-login-box layadmin-user-login-header">
      <h2>注册</h2>
      <p>在线汽车租赁平台</p>
    </div>
    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
      <form class="layui-form" name="body">
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                 for="LAY-user-reg-username"></label>
          <input type="text" name="username" id="LAY-user-reg-username" lay-verify="required|uname"
                 placeholder="用户名" class="layui-input">
        </div>
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                 for="password"></label>
          <input type="password" name="password" id="password" lay-verify="required|pass"
                 placeholder="密码" class="layui-input">
        </div>
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                 for="password2"></label>
          <input type="password" name="password2" id="password2" lay-verify="required|pass"
                 placeholder="确认密码" class="layui-input">
        </div>
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                 for="LAY-user-reg-phone"></label>
          <input type="phone" name="phone" id="LAY-user-reg-phone" lay-verify="phone" placeholder="电话"
                 class="layui-input">
        </div>
        <div class="layui-form-item">
          <input id="LAY-user-reg-man" type="radio" name="gender" value="男" title="男" checked>
          <input id="LAY-user-reg-woman" type="radio" name="gender" value="女" title="女">
        </div>
        <div class="layui-form-item">
          <label class="layadmin-user-login-icon layui-icon layui-icon-email"
                 for="LAY-user-reg-email"></label>
          <input type="email" name="email" id="LAY-user-reg-email" lay-verify="email" placeholder="邮箱"
                 class="layui-input">
        </div>

        <div class="layui-form-item">
          <div class="layui-row">
            <div class="layui-col-xs7">
              <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                     for="LAY-user-login-vercode"></label>
              <input type="text" name="authCode" id="LAY-user-login-vercode" lay-verify="required"
                     placeholder="图形验证码" class="layui-input">
            </div>
            <div class="layui-col-xs5">
              <div style="margin-left: 10px;">
                <img src="/getAuthCode" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <button onclick="login()" class="layui-btn layui-btn-fluid" lay-submit
                  lay-filter="sub">注 册
          </button>
        </div>
        <div class="layui-form-item">
          <button type="reset" class="layui-btn layui-btn-fluid">重 置
          </button>
        </div>
      </form>
      <div class="layui-trans layui-form-item layadmin-user-login-other">
        <!--<label>社交账号登入</label>-->
        <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>-->
        <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
        <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>-->
        <a href="/login" class="layadmin-user-jump-change layadmin-link">返回登录</a>
      </div>
    </div>
  </div>

  <div class="layui-trans layadmin-user-login-footer">
    <p>© 2018 <a href="" target="_blank">zyt.com</a></p>
  </div>

</div>

<script src="layui/layui.js" charset="utf-8"></script>

<script>
  //Demo
  layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.$;
    form.verify({
      uname: [
        /^[\S]{6,12}$/
        , '用户名必须6到12位，且不能出现空格'
      ],
      pass: [
        /^[\S]{6,12}$/
        , '密码必须6到12位，且不能出现空格'
      ]
    });

    form.on('submit(sub)', function () {
      const password = $("#password").val();
      const password2 = $("#password2").val();
      if (!(password === password2)) {
        layer.alert("两次密码不一致");
        return false;
      }
      let parameter = $("form").serialize();
      $.ajax({
        type: 'post'
        , data: parameter
        , url: 'regUser'
        , success: function (data) {
          if (data.code == 200) {
            layer.alert(data.message);
            setTimeout(function () {
              window.location.href = "login"
            }, 1 * 1000)
          } else {
            layer.msg(data.message);
          }
        }
      });
      return false;
    });
  });
</script>
</body>
</html>